<template>
	<div style="margin-right: 30px;">
		<el-form
		label-width="90px"
		:rules="rules"
		ref="formObj"
		:model="visitorform">
				<el-form-item label="来访目的"  prop="type">
					<el-radio-group v-model="visitorform.type">
						<el-radio label="中介看房"></el-radio>
						<el-radio label="旅游暂住"></el-radio>
			  			<el-radio label="看望老友"></el-radio>
			  			<el-radio label="应聘面试"></el-radio>
			  			<el-radio label="志愿活动"></el-radio>
					</el-radio-group>
			  	</el-form-item>
			   <el-form-item label="有效日期" prop="aging">
				   <br/>
				  <el-radio-group v-model="visitorform.aging">
				  	<el-radio label="仅一次"></el-radio>
				  	<el-radio label="一天"></el-radio>
				  	<el-radio label="三天"></el-radio>
				  	<el-radio label="七天"></el-radio>
				  	<el-radio label="两周"></el-radio>
				  </el-radio-group>
			   </el-form-item>
			   <el-form-item label="来访人数" prop="count">
			         <el-input v-model.number="visitorform.count" style="width: 300px;"/>
			       </el-form-item>
			   <el-form-item label="具体描述" prop="description">
			      <el-input
				  type="textarea"
				  v-model="visitorform.content"
				  placeholder="请对您的目的进行进一步的说明"
				  :rows="6"
				  maxlength="60"
				  show-word-limit></el-input>
			    </el-form-item>
			 <div style="margin-left: 30px; color: red; margin-bottom: 20px; font-size: 0.8rem;">
				 *若是暂时停留时间超过两周，请先申请两周，过期之后进行再一次申请。如果停留时间超过两个月，请办理长期通行证
			 </div>
			 <el-form-item>

			    <el-button type="primary" @click="save()" plain>提交</el-button>
			    <el-button type="danger" @click="reset()" plain>重置</el-button>
			  </el-form-item>
		</el-form>
	</div>
</template>

<script setup >
	import { reactive,ref } from 'vue'
	import { getCookieForObject} from '@/util';
	import{_axios} from '@/plugins/axios'
	import { get, post } from '@/plugins/axios'
	const emits = defineEmits(['update:show', 'getTableData'])
	const props = defineProps(['id'])
	console.dir(props.id)
	const formObj = ref()
	const visitorform = reactive({
	  id: '',
	  type: '',
	  content: '',
	  aging: '',
	  count: '',
	})
	function getUserId(){
		const userinfo= getCookieForObject('user')
	    return userinfo.id
	}
	function getUserName()
	{
		const userinfo= getCookieForObject('user')
		return userinfo.username

	}
	const userId=getUserId()
	const username=getUserName()
	function check (rules, value, callback) {
		get('/visitor/check', { id: props.id, value, field: rules.field }, content => {
			if (content) {
				callback()
			} else {
				callback(new Error())
			}
		})
	}
	function save()
	{
		formObj.value.validate(valid=>{
			if(valid){
				if(props.id)
				{
					post('/visitor/update',{id:props.id,type:visitorform.type,content:visitorform.content,count:visitorform.count,aging:visitorform.aging,username:username},content=>{
						emits('update:show',false)
						emits('getTableData')
					})
				}
				else{
					post('/visitor/add',{userId:userId,type:visitorform.type,content:visitorform.content,count:visitorform.count,aging:visitorform.aging,username:username},content=>{
						emits('update:show',false)
						emits('getTableData')
					})
				}
			}
			})
	}

const rules = reactive({
	content:[{ required: true, message: '请输入相关描述', trigger: 'blur' },],
	aging:[{required: true, message: '请选择通行日期', trigger: 'change',}],
	type: [{required: true,message: '请选择目的',trigger: 'change',}],
	count:[{required:true,message:'请输入来访人数'},
			{ type: 'number', message: '请正确输入数字类型',trigger: 'blur'},]
})
function getById () {
	get('/visitor/getById', { id: props.id }, content => {
		for (const key in visitorform) {
			if (Object.prototype.hasOwnProperty.call(content, key)) {
				visitorform[key] = content[key]
			}
		}
		console.dir(visitorform)
	})
}
	if (props.id)
	{
		visitorform.id = props.id
		console.dir(visitorform.id)
		console.dir(props.id)
		getById()
	}
function reset()
{
	visitorform.type='',
	visitorform.content='',
	visitorform.aging='',
	visitorform.count=''
}
</script>

<style scoped lang="scss">
</style>